Javascript 模拟 键盘/鼠标 事件
三个步骤:
首先通过 document.createEvent() 方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:
- UIEvents(DOM3中的UIEvent)鼠标和键盘事件;
- MouseEvents(DOM3中的MouseEvent)鼠标事件;
- MutationEvents(DOM3中的MutationEvent)变动事件;
- HTMLEvents(没有DOM3中对应的事件)HTML事件;
其次在创建了event对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象。用 event.init……() 此类行的方法。
- 最后就是触发事件。这需要使用 dispatchEvent() 方法,接收一个参数,即表示要触发的event对象。
模拟鼠标事件
首先创建鼠标事件对象的方法createEvent()传入MouseEvents,返回的对象的方法initMouseEvent(),接收15个信息:
1\. type(字符串):事件类型如“click”; 2\. bubble(布尔值):是否冒泡; 3\. cancelable(布尔值):是否可取消; 4\. view(AbstractView):与事件关联的视图,一般为 document.defaultView ; 5\. detail(整数):一般为0,一般只有事件处理程序使用; 6\. screenX(整数):事件相对于屏幕的X坐标; 7\. screenY(整数); 8\. clientX(整数):事件相对于视口的X坐标; 9\. clientY(整数); 10\. ctrlKey(布尔值):是否按下了Ctrl键,默认为false; 11\. altKey(布尔值); 12\. shiftKey(布尔值); 13\. metaKey(布尔值); 14\. button(整数):表示按下了哪个鼠标键,默认为0; 15\. relatedTarget(对象):表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。 16\. 最后记得把event对象传给dispatchEvent()方法。
|
如模拟按钮的单击事件:
var btn = document.querySelector("#btn"); var event = document.createEvent("MouseEvents"); event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null); btn.dispatchEvent(event); 另外,建议使用构造函数"MouseEvent": var evt = new MouseEvent("click", { bubbles: true, cancelable: true, view: window }); btn.dispatchEvent(event);
|
模拟键盘事件
首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents,返回的对象的方法initKeyEvent(),接收下面参数:
1\. type(字符串):要触发的事件类型,“keydown”等; 2\. bubbles(布尔值):表示事件是否应该冒泡; 3\. cancelable(布尔值):是否可以取消; 4\. view(AbstractView):与事件关联的视图。一般为 document.defaultView ; 5\. key(布尔值):表示按下的键的键码; 6\. location(整数):表示按下哪里的键。0为主键盘;1为左;2为右;3为数字键盘;4为虚拟键盘;5为手柄; 7\. modifiers(字符串):空格分隔的修改键列表,如“shift”; 8\. repeat(整数):在一行中按下了多少次这个键;
|
由于DOM3级不提倡使用keypress事件,因此只能利用这种技术来模拟keydown和keyup事件:
var textbox = document.querySelector("#myTextBox"); var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0); textbox.dispatchEvent(event);
|
在Firefox中,调用createEvent()并传入”KeyEvents”就可以创建一个键盘事件,返回的事件对象会包含一个initKeyEvent()方法,接收参数:
1\. type; 2\. bubbles; 3\. cancelable; 4\. view; 5\. ctrlKey; 6\. altKey; 7\. shiftKey; 8\. metaKey; 9\. keyCode; 10\. charCode;
|
另外,建议使用构造函数”KeyboardEvent”
模拟其他事件
浏览器中很少使用变动事件和HTML事件;
- 要模拟变动事件,可以用 createEvent(“MutationEvent”);initMutationEvent();
- 要模拟HTML事件,可以用 createEvent(“HTMLEvents”);initEvent();
自定义DOM事件
用createEvent(“CustomEvent”); initCustomEvent()方法,接收参数:type;bubbles;cancelable;detail;
var btn = document.querySelector("#btn"); var evt = document.createEvent("CustomEvent"); evt.initCustomEvent("click",true,true,"Hello there"); btn.onclick = function () { console.log(event.detail); }; btn.dispatchEvent(evt);
|
IE中的事件模拟
调用 document.createEventObject() 方法,创建event对象,并指定必要的信息,最后在目标上调用fireEvent()方法,接收两个参数:事件处理程序名称和event对象:
var btn = document.querySelector("#btn"); var evt = document.createEventObject(); evt.screenX = 0; evt.screenY = 0; evt.clientX = 0; evt.clientY = 0; evt.ctrlKey = false; evt.altKey = false; evt.shiftKey = false; evt.button = 0; btn.fireEvent("onclick",evt);
|